<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 200px;
            height:100px;
            background: url('./imgs/loading.gif') no-repeat 50% 50%;
        }
        #imglist img.selected{
             border: 5px solid #f00;
             width: 190px;
             height: 90px;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ 文档操作</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/Meinv001.jpg">
        <img src="./imgs/Meinv002.jpg">
        <img src="./imgs/Meinv003.jpg">
        <img src="./imgs/Meinv004.jpg">
        <img src="./imgs/Meinv005.jpg">
        <img src="./imgs/Meinv006.jpg">
        <img src="./imgs/Meinv007.jpg">
        <img src="./imgs/Meinv008.jpg">
        <img src="./imgs/Meinv009.jpg">
        <img src="./imgs/Meinv010.jpg">
        <img src="./imgs/Meinv011.jpg">
        <img src="./imgs/Meinv012.jpg">
        <img src="./imgs/Meinv013.jpg">
        <img src="./imgs/Meinv014.jpg">
        <img src="./imgs/Meinv015.jpg">
    </div>

    <hr>
    <button>append</button>
    <button>appendTo</button>
    <button>prepend</button>

    <button>after</button>
    <button>insertAfter</button>
    <button>before</button>

    <button>wrap</button>
    <button>wrapAll</button>

    <button>replaceWith</button>
    <button>replaceAll</button>

    <button>remove</button>
    <button>empty</button>

    
    <script>
        $('button').click(function (){
            // JQ 创建节点
            var img = $('<img src="./imgs/Meinv018.jpg">');

            switch ($(this).html()) {
                case 'append': $('#imglist').append(img); break;
                case 'appendTo': $(img).appendTo('#imglist'); break;
                case 'prepend': $('#imglist').prepend(img); break;
                
                case 'after': $('#imglist').after(img); break;
                case 'insertAfter': $(img).insertAfter('#imglist');break;
                case 'before': $('#imglist').before(img); break;

                case 'wrap': $('#imglist img').wrap('<li>'); break;
                case 'wrapAll': $('#imglist img').wrapAll('<li>'); break;

                // case 'replaceWith': $('#imglist img.selected').replaceWith(img); break;
                // case 'replaceAll': $(img).replaceAll('#imglist img.selected'); break;

                case 'replaceWith': $('#imglist img').replaceWith(img); break;
                case 'replaceAll': $(img).replaceAll('#imglist img'); break;


                case 'remove': $('#imglist img.selected').remove(); break;
                case 'empty': $('#imglist').empty(); break;
            }
        });


        // 选中效果,且只能选一张
        $('#imglist img').click(function (){
            $(this).addClass('selected').siblings('img').removeClass('selected');
        });


    </script>
</body>
</html>